0126. 模块化
1. 🎯 本节内容
- 前端模块化
2. 🫧 评价
在接下来的内容中，主要会介绍：
- 前端模块化发展简史
- CommonJS、AMD、CMD、ES Module 模块化规范的相关知识点
3. 🔍 章节速览
| 笔记 | 简介 |
|---|---|
| 0115.前端模块化发展史 | 前端模块化发展史，简单讲就是一开始没必要，随着生态逐步完善，项目规模逐渐庞大，模块化自然而然就成为了必然。 |
| 0070.CommonJS | 介绍了 CommonJS 规范的核心内容、模块导入导出方式、入口文件机制、同步加载特性、路径解析和缓存机制，并通过多个示例演示了 Node.js 中 CommonJS 的实际用法。 |
| 0068.AMD | AMD 可以说几乎完全退出历史舞台了，很少场景会使用到它，简单了解一下它的导入导出写法即可。 |
| 0067.CMD | 和 AMD 一样，CMD 也可以说几乎完全退出历史舞台了，很少场景会使用到它，简单了解一下它的导入导出写法，能读懂程序即可。 |
| 0128.对比 AMD、CMD | AMD、CMD 的差异点有很多，这篇笔记主要关注模块的加载和执行的差异，来对 AMD 和 CMD 做一个比较。 |
| 0061.在浏览器中引入 ESM 模块 | 暂无简介 |
| 0062.ESM 绑定再导出 | 暂无简介 |
| 0063.ESM 模块的基本导出、导入 | 暂无简介 |
| 0064.ESM 模块的默认导入、导出 | 暂无简介 |
| 0065.ESM 依赖预加载和依赖延迟加载 | 暂无简介 |
| 0066.ESM - 练习 - 推箱子小游戏 | 暂无简介 |
| 0069.JS 导入断言 | 暂无简介 |
| 0127.模块化 - 总结 | 暂无简介 |
4. ⌛️ 模块化发展时间线
4.1. CommonJS（2009 左右）
- 场景：最初为 Node.js 服务。
- 特点：同步加载（
require）、导出（module.exports）。 - 局限：浏览器环境中无法直接使用（因为网络加载是异步的）。
4.2. AMD / RequireJS（2009 ~ 2010）
- 背景：为了解决浏览器端的异步加载问题。
- 代表：RequireJS。
- 特点：依赖前置（在
define([...], function(...){})中先声明依赖），异步加载，适合浏览器环境。
4.3. CMD / SeaJS（2011 左右，中国社区提出）
- 背景：觉得 AMD 的写法不够直观，依赖必须前置。
- 代表：SeaJS（玉伯开发）。
- 特点：依赖就近（在代码需要时再
require），更贴近 CommonJS 的风格，延迟执行。 - 和 AMD 的关系：不是演进关系，而是并行的另一种方案。
4.4. ES Modules（2015，ES6 标准化）
- 背景：JavaScript 官方终于在语言层面统一了模块化标准。
- 特点：
import/export，静态依赖分析，可同时支持浏览器和 Node。 - 影响：逐渐替代 AMD/CMD/CommonJS 成为标准方案。
5. 🤔 模块的核心概念都有哪些？
5.1. 模块
模块就是一个文件，比如在 JavaScript 中，一个模块通常表现为一个 .js 或 .ts 文件。每个模块负责实现一部分功能，并隐藏自己的内部实现，同时提供一些接口供其他模块使用。
5.2. 模块化
模块化允许开发者将复杂的程序分解为"独立、可重用、更易于管理和维护"的小部分。可以说模块化这一特性是开发大型复杂项目必须具备的。
5.3. 模块的两个核心要素（隐藏、暴露）
- 隐藏 - 隐藏的是模块内部的实现细节
- 暴露 - 暴露的是希望外部使用的接口
任何一个正常的模块化标准，都应该默认隐藏模块中的所有实现，而通过特定的语法或 API 来暴露接口。
模块的导出
模块的导出就是暴露接口的过程。当需要使用一个模块时，使用的是该模块暴露的部分（导出的部分），隐藏的部分对于模块外部（也就是其他模块）是永远无法访问的。
js
// util.js 模块
// 一个模块中的内容主要分为两部分：
// 1. 隐藏的内部实现
// 2. 暴露出去的接口（通过导出语法）模块的导入
当通过某种语法使用一个模块时，这个过程叫做模块的导入。
js
// 导入指定模块 util.js 暴露的内容
// util.sort 可能是 util 模块暴露的一个排序方法
// util.xxx 一个模块可以暴露多个接口